
<script setup>
import { ref, computed,onMounted } from 'vue';
import * as indexdata from '@/api/indexdata.js';

const dataModel = ref([]);

const currentPage = ref(1);  // 当前页
const pageSize = ref(10);      // 每页显示的通知数量
const total = ref(0); //总数

// 处理页码变化
const handlePageChange = (page) => {
  currentPage.value = page;
  getData();
};

const getData = async () => {
  const param = {
    currentPage:currentPage.value
  }
  const res = await indexdata.findMessageService(param);
  // if(res == 0){
  dataModel.value = res.data;
  total.value = res.total;
  // }
  console.log(dataModel.value)
};


onMounted(() => {
  setTimeout(() => {
    getData();
  }, 100); // 等待 100ms 再获取数据
});

const formatDate = (date) => {
  if (!date) return '';
  const d = new Date(date);
  return d.toLocaleDateString(); // 根据需求你可以选择不同的格式化方式
};


</script>

<template>
  <el-card class="notification-card">
    <h2 class="review-title">通知信息</h2>
    <el-divider></el-divider>
    <!-- 临时调试 -->

    <!-- 通知列表 -->
    <el-list>
      <el-list-item v-for="(item, index) in dataModel" :key="index">
        <div class="notification-item">
          <h3>{{ item.title }}</h3>
          <p>{{ item.content }}</p>
          <p class="time">{{ formatDate(item.createTime) }}</p>
        </div>
      </el-list-item>
    </el-list>

    <!-- 分页 -->
    <el-pagination
      :total="total"
      :page-size="pageSize"
      :current-page="currentPage"
      @current-change="handlePageChange"
      layout="prev, pager, next"
      style="margin-top: 20px; display: flex; justify-content: flex-end;"
    ></el-pagination>
  </el-card>
</template>



<style scoped>
.notification-card {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 100vh; /* 占满屏幕 */
  overflow: hidden; /* 去除内部滚动条 */
}

.review-title {
  font-size: 22px;
  font-weight: bold;
  margin-top: -10px;
  margin-bottom: 10px;
}

.notification-item {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #ddd;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.notification-item:hover {
  background-color: #f5f5f5;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
}

.notification-item h3 {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.notification-item p {
  font-size: 14px;
  color: #555;
  margin-bottom: 5px;
}

.time {
  font-size: 12px;
  color: #aaa;
  margin-top: 10px;
}

.el-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
